<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div class="dashboard-text" id="main"></div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
import echarts from "echarts";
export default {
  name: "Dashboard",
  data() {
    return {
      option: {
        title: {
          text: "每日推荐详情图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["新价格", "旧价格", "库存", "总商品量", "搜索引擎"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "新价格",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [],
          },
          {
            name: "旧价格",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [],
          },
          {
            name: "库存",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [],
          },
          {
            name: "总商品量",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [],
          },
        ],
      },
    };
  },
  async mounted() {
    await this.getList();
    let a = this.shoops.map((v) => {
      return v.title;
    });
    let xAxis = [],
      newPrice = [],
      oldPrice = [],
      inventory = [],
      allNum = [];
    for (let i = 0; i < this.shoops.length; i++) {
      xAxis.push(this.shoops[i].title);
      newPrice.push(this.shoops[i].newPrice);
      oldPrice.push(this.shoops[i].oldPrice);
      inventory.push(this.shoops[i].inventory);
      allNum.push(this.shoops[i].allNum);
    }
    console.log(this.shoops);
    this.option.xAxis[0].data = xAxis; //商品名
    this.option.series[0].data = newPrice; //新价格
    this.option.series[1].data = oldPrice; //旧价格
    this.option.series[2].data = inventory; //库存
    this.option.series[3].data = allNum; //总量

    let ob = {
      title: {
        text: "每日推荐详情图",
      },
      xAxis: {
        data: xAxis,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
      },
      grid: {
        left: 10,
        right: 10,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
        padding: [5, 10],
      },
      yAxis: {
        axisTick: {
          show: false,
        },
      },
      legend: {
        data: ["新价格", "旧价格", "库存", "总商品量"],
      },
      series: [
        {
          name: "新价格",
          itemStyle: {
            normal: {
              color: "#FF005A",
              lineStyle: {
                color: "#FF005A",
                width: 2,
              },
            },
          },
          smooth: true,
          type: "line",
          data: newPrice,
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
        {
          name: "旧价格",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#E6A23C",
              lineStyle: {
                color: "#E6A23C",
                width: 2,
              },
            },
          },
          data: oldPrice,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
        {
          name: "库存",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#67C23A",
              lineStyle: {
                color: "#67C23A",
                width: 2,
              },
            },
          },
          data: inventory,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
        {
          name: "总商品量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#409EFF",
              lineStyle: {
                color: "#409EFF",
                width: 2,
              },
            },
          },
          data: allNum,
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("main"));
    myChart.setOption(ob);
  },
  methods: {
    ...mapActions("dashboard", ["getList"]),
  },
  computed: {
    ...mapState("dashboard", ["shoops"]),
    ...mapGetters(["name"]),
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    width: 100%;
    height: 600px;
  }
}
</style>
